<template>
	<view class="content">
		<view v-if="list.length>0"  class="list" v-for="(item, index) in list" :key="index">
			<view class="item">
				<view class="element line1">
					<view class="status">{{item.status}}</view>
					<view class="time">{{item.dateTime}}</view>
				</view>
				
				<view class="element line1-1">
					<view class="getInfo getName" v-if="item.getName != null && item.getName.length>0">收件人：{{item.getName}}</view>
					<view class="getInfo getTel" v-if="item.getTel != null && item.getTel.length>0">电话：{{item.getTel}}</view>
					<view class="getInfo getAddress" v-if="item.getAddress != null && item.getAddress.length>0">收件地址：{{item.getAddress}}</view>
					<view class="getInfo expressCom" v-if="item.expressCom != null && item.expressCom.length>0">快递公司：{{item.expressCom}}</view>
					<view class="getInfo expressNo" v-if="item.expressNo != null && item.expressNo.length>0">快递单号：{{item.expressNo}}</view>
				</view>
				
				<view class="element line2">
					<view class="desc img">
						<image :src="item.picUrl"></image>
					</view>
					<view class="desc txt">
						<view class="title">{{item.name}}</view>
					</view>
				</view>
				<view class="element line3">
					<view class="desc note">{{item.note}}</view>
					<view class="desc code" @click="showCode(index)">兑换码</view>
				</view>
			</view>
		</view>
		<view class="noMore" v-show="isNoMore">暂无更多数据...</view>
		
		<uni-popup ref="popupCode" type="center">
			<view class="popupCode-v">
				<view class="pop-title">核销码</view>
				<canvas canvas-id="qrcode" style="width: 200px;height: 200px;" />
				<view class="pop-note">兑换请对应核销服务商</view>
			</view>
			<image @click="toClose" src="../../../static/img/my/exit.png" mode="widthFix" class="response"></image>
		</uni-popup>
	</view>
</template>

<script>
	import uQRCode from '../../../js_sdk/Sansnn-uQRCode/uqrcode.js'
	export default{
		data(){
			return{
				isNoMore:false,
				list:[],
				page:1
			}
		},
		onShow() {
			//初始化
			this.$refs.popupCode.close();
			this.list = [];
			this.getData(1);
		},
		methods:{
			toClose(){
				 this.$refs.popupCode.close();
			},
			async make(code){
			 // 回调方式
			  uQRCode.make({
				canvasId: 'qrcode',
				componentInstance: this,
				text: code,
				size: 200,
				margin: 5,
				backgroundColor: '#ffffff',
				foregroundColor: '#000000',
				fileType: 'png',
				errorCorrectLevel: uQRCode.errorCorrectLevel.H,
				success: res => {
				}
			  })
			},
			showCode(index){
				 uni.showLoading({
				 	mask:true,
					title:'生成中...'
				 })
				 let code = this.list[index].exchangeCode;
				 this.make(code);
				 let that = this;
				 setTimeout(function(){
					  uni.hideLoading();
					  that.$refs.popupCode.open();
				 },600)
			},
			getData(page){
				let opts = {
					url: 'myMarkingRecord/getMarkingRecord/'+page,
					method: 'get'
				};
				let param = {};
				this.tokenRequest(opts, param).then(res => {
					uni.hideLoading();
					let rData = res.data;
					if(rData.length ==0){
						uni.showToast({
							title: '暂无更多数据...',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						this.isNoMore = true;
						return;
					}
					for (let i = 0; i < rData.length; i++) {
						this.list.push(rData[i]);
					}
				}, error => {})
			}
		},
		onReachBottom(){
			this.page++;
			this.getData(this.page);
		}
	} 
</script>

<style>
	
	
	.popupCode-v{
		background-color: #fff;
		border-radius: 10rpx;
	}
	
	.popupCode-v .pop-title{
		text-align: center;
		margin: 20rpx;
	}
	.popupCode-v .pop-note{
		text-align: center;
		color: #ED1941;
		font-size: 28rpx;
	}
	
	.response{
		width: 50rpx;
		height: 50rpx;
		margin-left: 200rpx;
		margin-top: 20rpx;
	}
	
	.nullData{
		text-align: center;
		margin-top: 50rpx;
	}
	.nullData image{
		width: 360rpx;
		height: 360rpx;
	}
	
	.element .desc{
		float: left;
	}
	.line3 .note{
		color: #999999;
		font-size: 28rpx;
		width: 520rpx;
	}
	.line3 .code{
		background-color: #007AFF;
		color: #fff;
		margin-left: 10rpx;
		font-size: 30rpx;
		border-radius: 20rpx;
		padding: 5rpx 20rpx;
	}
	.line2 .img{
		width: 120rpx;
	}
	.line2 .txt{
		width: 520rpx;
	}
	
	.line2 .desc{
		float: left;
	}
	.status{
		float: left;
		font-size: 32rpx;
		font-weight: 800;
	}
	.time{
		float: right;
		font-size: 28rpx;
	}
	.line1{
		overflow: hidden;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #E6E6E6;
		padding-bottom: 10rpx;
	}
	.item{
		width: 670upx;
		background-color: #fff;
		margin: 10rpx 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;
	}
	image{
		width: 100rpx;
		height: 100rpx;
	}
	.element{
		overflow: hidden;
	}
	.element .getInfo{
		font-size: 30rpx;
		margin: 8rpx;
	}
</style>
